import React from 'react';
import PageTitle from 'component/page-title/index.jsx';
import CatetorySelector from './category-selector.jsx';
import Product from 'service/product-service.jsx';
import MUtil from 'util/mm.jsx';
import './save.scss';

const _product = new Product();
const _mm = new MUtil();


class ProductDetail extends React.Component {
    constructor(props) {
        console.log('ProductDetail')
        super(props);
        this.state = {
            id: this.props.match.params.pid,
            name: '',//商品名称
            subtitle: '',//商品描述
            price: '',//商品价格
            stock: '',//库存
            detail: '',//详情，富文本编辑器里面的内容
            status: 1,//商品状态1，为在售状态

            categoryId: 0,
            parentCategoryId: 0,
            subImages: []
        }
    }

    componentDidMount() {
        this.loadProduct();
    }
    //加载商品详情
    loadProduct() {
        //有ID的时候，表示是编辑功能，需要表单回填  
        if (this.state.id) {
            _product.getProduct(this.state.id).then((res) => {
                let images = res.subImages.split(',');
                res.subImages = images.map((imgUri) => {
                    return {
                        uri: imgUri,
                        url: res.imageHost + imgUri
                    }
                });
                this.setState(res);
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            })
        }
    }
    getSubImagesString() {
        return this.state.subImages.map(image => image.uri).join()
    }

    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title='添加产品'></PageTitle>

                <div className="form-horizontal">

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.name}</p>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.subtitle}</p>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CatetorySelector
                            readOnly
                            categoryId={this.state.categoryId}
                            parentCategoryId={this.state.parentCategoryId}
                            onCategoryChange={
                                (categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)
                            } />
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品价格</label>
                        <div className="col-md-3">

                            <div className="input-group">
                                <input type="number" className="form-control"
                                    value={this.state.price} readOnly/>
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                    value={this.state.stock} readOnly/>
                                <span className="input-group-addon">件</span>
                            </div>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品图片</label>

                        <div className="col-md-10">
                            {
                                this.state.subImages.length ? this.state.subImages.map(
                                    (image, index) => (
                                        <div className='img-con' key={index}>
                                            <img src={image.url} />
                                        </div>
                                    )
                                ) : (<div>暂无图片</div>)
                            }
                        </div>

                        <div className="col-md-10 col-md-offset-2 file-upload-con">
                            {/* <FileUploader onSuccess={(res) => { this.onUploadSuccess(res) }}
                                onError={(errMsg) => { this.onUploadError(errMsg) }}></FileUploader> */}
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        <div className="col-md-10">
                            <div dangerouslySetInnerHTML={{__html: this.state.detail}}></div>                            
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default ProductDetail;